.header {
  position: fixed;
  background-color: #fff;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 40px;
  z-index: 2;
  padding: 16px;
  border-bottom: 1px solid #ccc;
  //   background: linear-gradient(to right, #fdfbfb, #ebedee);
  //   border-radius: 20px;
  //   box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);

  &__logo {
    img {
      height: 40px;
    }
  }

  &__nav {
    display: flex;
    align-items: center;
    margin-right: 16px;
    &-list {
      display: flex;
      list-style: none;
      padding: 0;
      margin: 0;

      .header__nav-item {
        margin-left: 20px;

        &--active {
          .header__nav-link {
            color: #007bff;
            font-weight: bold;
            position: relative;

            &::after {
              content: "";
              position: absolute;
              bottom: -5px;
              left: 0;
              width: 100%;
              height: 2px;
              background: #007bff;
            }
          }
        }
      }

      .header__nav-link {
        text-decoration: none;
        color: #333;
        font-weight: 500;
        transition: color 0.3s ease;

        &:hover {
          color: #007bff;
        }
      }

      @media (max-width: 768px) {
        display: none; /* 移动端隐藏桌面导航 */
      }
    }
  }

  &__icon {
    font-size: 24px;
    cursor: pointer;

    &--menu {
      display: none;

      @media (max-width: 768px) {
        display: block; /* 仅在移动端显示菜单图标 */
      }
    }
  }
}

.m-header-nav__container {
  padding: 10px 20px;
}

.m-header-nav__close-icon {
  font-size: 20px;
  cursor: pointer;
}
